<template>
	<view class="content page" id="checkout_counter">
		<status-bar title='支付' :delta='detal'></status-bar>
		<view class="c_ctr_main">
			<view class="c_ctr_info thmeBg" :style="{'--color': color}">
				<view>
					<view>应付</view>
					<view class="price6">
						￥<span class="price6_num">{{total.total_fee?total.total_fee:0}}</span>
					</view>
				</view>
				<image class="img_cover" :src="staticUrl+'/images/checkstand_cover.png'" mode="widthFix"></image>
			</view>
			<view class="c_ctr_list">
				<!-- 线下结算 -->
				<radio-group @change="pay_select(1)" v-if='cashPay == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/p_cash.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">线下结算</view>
						</view>
						<view class="fake-radio" :class="pays_selc==1?'thmeBorder thmeBg':''" :style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="1" :checked="pays_selc==1" />
						</view>
					</label>
				</radio-group>

				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信支付 -->
				<radio-group @change="pay_select(2)" v-if='payState == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/weixinPay.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">微信支付</view>
						</view>
						<view class="fake-radio" :class="pays_selc==2?'thmeBorder thmeBg':''" :style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="2" :checked="pays_selc==2" />
						</view>
					</label>
				</radio-group>
				<!-- #endif -->
				<!-- 支付宝支付 -->
				<!-- #ifdef MP-TOUTIAO -->
				<radio-group @change="pay_select(3)" v-if='payState == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/wx_pay_ico.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">支付宝支付</view>
						</view>
						<view class="fake-radio" :class="pays_selc==3?'thmeBorder thmeBg':''" :style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="6" :checked="pays_selc==3" />
						</view>
					</label>
				</radio-group>
				<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
				<radio-group @change="pay_select(5)" v-if='payState == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/wx_pay_ico.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">支付宝支付</view>
						</view>
						<view class="fake-radio" :class="pays_selc==5?'thmeBorder thmeBg':''" :style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="6" :checked="pays_selc==5" />
						</view>
					</label>
					
				</radio-group>
				<!-- #endif -->
				<!-- 零钱支付 -->
				<radio-group @change="pay_select(4)">
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/p_money_ico.png'" class="lq_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">余额（剩余￥{{total.v_momey?total.v_momey:0}}）</view>
						</view>
						<view class="fake-radio" :class="pays_selc==4?'thmeBorder thmeBg':''" :style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="2" :checked="pays_selc==4" />
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="c_ctr_pay btn3 thmeBg" :style="{'--color': color}" @click="pay_money" v-if='!notEnough'>{{payAPP}}支付￥{{total.total_fee?total.total_fee:0}}</view>
		<navigator url='/moneyPage/capital/recharge' hover-class="none" v-else>
			<view class="c_ctr_pay btn3" style="background-color: #ED9648;" @click="pay_money">余额不足，去充值</view>
		</navigator>
	</view>
</template>
<script>
	var that;
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				payFlag: true,
				pays_selc: true,
				payAPP: "",
				paytype: 0,
				playid: '',
				openId: uni.getStorageSync("openid"),
				total: '',
				
				mode: uni.getStorageSync('mode'),
				staticUrl: this.staticUrl,
				notEnough:false, // 余额不足	
				cashPay:uni.getStorageSync('startUp').cashPay, // 是否开起线下付款 1开起 0不开启
				payState: uni.getStorageSync('startUp').payState, // 是否开起支付功能 1开起 0不开启
				detal: 1,
				car_id: '',
				tid: '',
				union_order_code: '',
				flag: false,
				pageData:'',
				shwoPop: 0
			}
		},
		onShow(){
			that = this
			
			if (uni.getStorageSync('path') == '12'){ // 支付成功返回
				this.backHome()
			} 
			that.notEnough = false;
			that.payFlag = true;
			// #ifdef MP-TOUTIAO
				that.payAPP = '支付宝';
				that.pays_selc = 3;
				that.paytype = 6
			// #endif
			// #ifdef MP-WEIXIN || H5
				that.payAPP = '微信';
				that.paytype = 1
				that.pays_selc = 2;
			// #endif
			// #ifdef APP-PLUS
				that.payAPP = '支付宝';
				that.pays_selc = 5;
				that.paytype = 10
			// #endif

			if(that.cashPay == 1){
				that.payAPP = '线下结算';
				that.pays_selc = 1;
				that.paytype = 99
			}
			
			let options = wx.getEnterOptionsSync();
			
			if(options.scene == '1038' && options.referrerInfo.appId=='wxef277996acc166c3' && this.shwoPop == 1){
			
				let extraData = options.referrerInfo.extraData;
				if(!extraData) return;
				if(extraData.code == 'success'){
					that.$rectTo('/pages/index/pay_scs?playid='+that.playid)
					
				}else if(extraData.code == 'cancel'){
					that.$rectTo('/pages/index/orderList?status=0&clickNav=1')
				}else{
					that.$rectTo('/pages/index/orderList?status=0&clickNav=1')
				}
			}
		
		},
		// onShareAppMessage(option) {
		// 	let shareData = uni.getStorageSync('shareData');
		// 	let vid = uni.getStorageSync('vid');
		// 	return {
		// 		title: shareData.title,
		// 		desc: shareData.desc,
		// 		path: '/pages/index/index?share_v_id=' + vid,
		// 		imageUrl: shareData.imageUrl
		// 	}
		// },
		onLoad(e) {		
			console.log('e', e)
			that = this
			that.playid = e.payid
			if(e.car_id) this.car_id = e.car_id
			if(e.tid) this.tid = e.tid
			if(e.union_order_code) this.union_order_code = e.union_order_code
			that.getPageData();
			if(e.path == 1){ // 从下单页面来的
				that.detal = 2
			}
			
		},
		onUnload() {
			this.shwoPop = 0
		},
		methods: {
			pay_select: function(n) {
				that.pays_selc = n;
				that.notEnough = false;
				if(n == 1){
					that.payAPP = '线下结算'
					that.paytype = 99
				}
				if(n == 2){ //微信支付
					that.payAPP = '微信'
					that.paytype = 1 
				}
				if(n == 3){ // 抖音支付宝
					that.payAPP = '支付宝'
					that.paytype = 6
				}
				if(n == 4){
					that.payAPP = '零钱'
					that.paytype = 2;
					if(parseFloat(that.total.total_fee) > parseFloat(that.total.v_momey)){
						that.notEnough = true;
					}
				}
				if(n == 5){ // app支付宝
					that.payAPP = '支付宝'
					that.paytype = 10
				}
			},
			getPageData: function() {//获取页面初始化数据
				that.$http.post({
					url: '/accountPay/getOrderInfo3',
					data: {
						orderAesStr: that.playid,
					
					}
				}).then(res => {
					if (res.code == 100) {
						that.total = res.data
					}
				})
			},
			pay_money: function() {
				if(that.paytype == 2 && that.notEnough){ // 余额不足
					return
				}
				if(!that.payFlag){return} // 避免重复提交
				that.payFlag = false;
				uni.showLoading({
					title:'支付中···'
				})
				that.$http.post({
					url: '/accountPay/cashierStorePageAjax',
					data: {
						orderAesStr: that.playid,
						payType: that.paytype,
						openId: that.openId
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 100) {
						that.flag = true
						var data = res.data;
						const Result = res.data;
						this.pageData = Result;
						if(that.paytype == 99){  // 货到付款成功
							uni.navigateTo({
								url: '/pages/index/pay_scs?playid='+that.playid
							})
							return
						}
						if(that.paytype == 10){  // app支付宝支付
					         uni.requestPayment({
					             provider: 'alipay',
					             orderInfo: data.params, //微信、支付宝订单数据
					             success: function (res1) {
					                 console.log('success:' + JSON.stringify(res1));
									 that.$rectTo('/pages/index/pay_scs?playid='+that.playid)
									
					             },
					             fail: function (err) {
					                 console.log('fail:' + JSON.stringify(err));
									 that.$rectTo('/pages/index/orderList?status=0&clickNav=1')
									
					             }
					         }); 
							return
						}
						if(that.paytype == 2){ // 零钱支付
							uni.redirectTo({
								url: '/pages/index/pay_scs?playid='+that.playid
							})
						}else{
							// #ifdef MP-WEIXIN
							if(Result.extraData){
								this.shwoPop = 1
								wx.openEmbeddedMiniProgram({
									appId:Result.appId,
									extraData:Result.extraData
								 });
							}else{
								uni.getProvider({
									service: 'oauth',
									success: function (resp) {
										console.log(resp.provider)
										if (resp.provider) {
											uni.requestPayment({
												provider:resp.provider[0],
												orderInfo: data,
												timeStamp: data.timeStamp,
												nonceStr: data.nonceStr,
												package: data.package,
												signType: data.signType,
												paySign: data.paySign,
												success:function (resj) {
													console.log('success:' + JSON.stringify(resj));
													that.$rectTo('/pages/index/pay_scs?playid='+that.playid)
												},
												fail: function (err) {
													console.log('fail:' + JSON.stringify(err));
													that.$rectTo('/pages/index/orderList?status=0&clickNav=1')
												}
											})
										}
									}
								})
							}
							
							
							
								
							// #endif
						}
					} else {
						if(that.paytype == 99){ // 货到付款不成功
							uni.navigateTo({
								url: '/pages/index/orderList?status=0&clickNav=1'
							})
							return
						}
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			}
		},
		onUnload(){
			console.log('flag', this.flag)
			if(this.tid && !this.flag){
				this.$http.post({
					url: '/singleSaleApi/tableConfirmOrder',
					data: {
						union_order_code: this.union_order_code,
						car_id: this.car_id,
						tid: this.tid
					}
				}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
	radio {
		transform: scale(0.7)
	}

	.wx_pay {
		width: 54upx;
		height: 54upx;
	}

	.lq_pay {
		width: 52upx;
		height: 52upx;
	}

	.price6_num {
		font-size: 60upx;
	}

	#checkout_counter .c_ctr_main {
		background: #ffffff;
	}

	.c_ctr_main .c_ctr_info {
		height: 360upx;
		margin-bottom: 68upx;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #ffffff;
		position: relative;
	}
	.img_cover{
		height: 38upx;
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.c_ctr_info .price6 {
		margin-top: 20upx;
	}

	.c_ctr_main .c_ctr_list {
		padding: 0 30upx;
	}

	.c_ctr_list .c_ctr_item {
		height: 112upx;
		border-bottom: 1px solid #dddddd;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}

	.c_ctr_item .c_ctr_item_info {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.c_ctr_item_info .c_ctr_item_ico {
		width: 56upx;
		height: 56upx;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
	}

	.c_ctr_item_info .c_ctr_item_t {
		width: 560upx;
		margin-left: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		font-family: arial;
	}
	.c_ctr_pay {
		position: fixed;
		right: 0;
		bottom: 30upx;
		left: 0;
		z-index: 999;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
</style>
